/** 
 * 自定义刮奖
 * */
 
 
 
 
 
 var perTotal = 0.4; //刮奖面积覆盖率
 var canvas = document.getElementById('mask');
 var context = canvas.getContext("2d");
 context.fillStyle = "#d1d1d1";
 context.fillRect(0, 0, 240, 240); 
 // 根据某个点在canvas上画圆
 // x 坐标和 y 坐标 两个坐标是触摸点的坐标而不是画圆的圆心
 // 圆心通过计算得出
 function drawArcByPoint(x, y) {
	 context.beginPath();
	 context.arc(x - canvas.offsetLeft, y - canvas.offsetTop, 20, 0, Math.PI * 2);
	 context.closePath();
	 context.fillStyle = '#dddddd';
	 context.fill();
	 context.globalCompositeOperation = 'destination-out';
	 checkComplete();
 }
 // 判断是否完成刮奖 点数大于80%
 function checkComplete() {
	 var imgData = context.getImageData(0, 0, 240, 65);
	 var pxData = imgData.data;// 获取字节数据
	 var len = pxData.length; // 获取字节长度
	 var count = 0; // 记录透明点的个数
	 // 主要的思想是 一个像素由四个数据组成，每个数据分别是 rgba() 所以第四个数据 a 表示alpha透明度
	 for (var i = 0; i < len; i += 4) {
		 var alpha = pxData[i + 3]; // 获取每个像素的透明度
		 if (alpha < 10) {
			 // 透明度小于10 
			 count++;
		 }
	 }
	 var percent = count / (len / 4);// 计算百分比
	 // 如果百分比大于0.8 则表示成功
	 if (percent >= perTotal) { 
		 // alert('刮奖成功'); return
		// 刮奖成功，自定义业务逻辑
		setDrawAdd();
	 }
 }
 // 鼠标按下 增加mousemove的事件监听
 canvas.addEventListener('mousedown', drawArcMouseHandle);
 canvas.addEventListener('mouseup', function (event) {
	 // 鼠标抬起之后，把mousemove的事件监听撤销掉
	 this.removeEventListener('mousemove', mousemoveHandle);
 });
 // 根据鼠标的move画圆
 function drawArcMouseHandle(event) {
	 event.preventDefault();
	 event.target.addEventListener("mousemove", mousemoveHandle);
 }
 // 为了能够移除movesemove的事件需要单独处理一下
 function mousemoveHandle(event) {
	 event.preventDefault();
	 drawArcByPoint(event.pageX, event.pageY);
 }
 // 监听 touchmove
 canvas.addEventListener('touchmove', drawArcTouchHandle);
 // 根据触摸点画圆 
 function drawArcTouchHandle(event) {
	 event.preventDefault();
	 var touch = event.touches[0];
	 drawArcByPoint(touch.pageX, touch.pageY);
 }
//自动加载
mui.plusReady(function () {
	(function($, owner) {
		getDrawReward();
	}(mui, window.app = {}));
});
// 设置奖品
function getDrawReward(){
	var spans = [
		'mui-icon mui-icon-map', 
		'mui-icon mui-icon-weibo', 
		'mui-icon mui-icon-micoff', 
		'mui-icon mui-icon-pengyouquan', 
		'mui-icon-extra mui-icon-extra-calc', 
		'mui-icon-extra mui-icon-extra-new', 
		'mui-icon-extra mui-icon-extra-grech', 
		'mui-icon-extra mui-icon-extra-gift', 
		'mui-icon-extra mui-icon-extra-gold', 
		'mui-icon-extra mui-icon-extra-alipay', 
		'mui-icon-extra mui-icon-extra-prech', 
		'mui-icon-extra mui-icon-extra-dictionary', 
		'mui-icon-extra mui-icon-extra-topic', 
		'mui-icon-extra mui-icon-extra-classroom', 
		'mui-icon-extra mui-icon-extra-university', 
		'mui-icon-extra mui-icon-extra-find', 
		'mui-icon-extra mui-icon-extra-holiday', 
		'mui-icon-extra mui-icon-extra-cold', 
	];
	// 随机获取8个
	var items = getRandomArrayElements(spans,9);
	items.sort();
	// 获取随机奖励
	var randInt = getRandomInt(1,5);
	mui("#numInput")[0].value = randInt;
	var i, h = '', 
		itemSpan = '奖励'+randInt+'元';
	for (i=0;i<items.length;i++) {
		h += '<li>';
		if (i!=4) {
			h += '<span class="';
			h += items[i];
			h += '" style="color:#0088CC;"></span>';
		} else {
			h += '<b style="color:#FF4466;">'+itemSpan+'</b>';
		}
		h += '</li>';
	}
	mui("#canvasBgUl")[0].innerHTML = h;
}
/** 
 * 从数组里面,随机获取几个元素
 * arr 数组, count获取个数
 * */
function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0), 
		i = arr.length, 
		min = i - count, 
		temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}
// 刮奖成功
function setDrawAdd(){
	var numInput = mui("#numInput")[0].value;
	// 系统参数
	var sys = getSys();
	var domain = sys.domain + '/app/reward/shake/add';
	// 用户信息
	var userInfo = cacheGet(userInfoKey);
	var uid = userInfo ? userInfo.uid : 0;
	mui.ajax(domain,{
		data:{
			appAccess: sys.appAccess,
			uid: uid,
			num: numInput
		},
		dataType:'json', //服务器返回json格式数据
		type:'post', //HTTP请求类型
		timeout:10000, //超时时间设置为10秒
		headers:{
			'Content-Type':'application/x-www-form-urlencoded',
		}, 
		success:function(res){
			if (res.code==-1) {
				mui.toast('需要更新系统参数',{ 
					duration:'short', type:'div',
				});
				setTimeout(function(){
					setSys();
					jumpToRewardShake();
				},500);
			} else if (res.code!=0) {
				mui.toast(res.msg);
				return
			}
			mui.toast('刮奖成功',{ 
				duration:'short', type:'div',
			});
			var drawId = res.data.lastId;
			var drawDate = res.data.createTime;
			var one = {
				drawId:drawId,
				drawNum:numInput,
				drawDate:drawDate
			};
			// 更新缓存
			setDrawCache(one);
			// 刷新页面
			setTimeout(function(){
				jumpToRewardDrawList();
			}, 1000);
		},
		error:function(xhr,type,errorThrown){
			mui.toast('网络错误！',{ 
				duration:'short', type:'div',
			});
		}
	});
}
// 获取数据缓存
function getDrawCache(){
	var resList = cacheGet(rewardDrawList);
	if (!resList) {
		var list = new Array(), //数据数组
			idstring = ''; //ID字符串集合
		return {
			// 数据数组
			list: list,
			// 历史ID集合
			idstr: idstring
		};
	}
	return resList;
}
/** 
* 设置数据缓存
* one 新数据一个
* */
function setDrawCache(one){
	var resList = getDrawCache();
	var list = resList.list,  //数据数组
		idstring = resList.idstr; //历史ID字符串集合
	if (list.length==0) {
		idstring = one.signId;
	} else {
		idstring = idstring+','+one.signId;
	}
	list[list.length] = one;
	var drawNew = {
		// 数据数组
		list: list,
		// 历史ID字符串集合
		idstr: idstring,
	};
	cacheSet(rewardDrawList, drawNew);
}